<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
    <link rel="stylesheet" href="../../resources/css/app.css" type="text/css" />
    <title>AIOS Visualization</title>
  	<script type="text/javascript" src="../../resources/js/sencha-touch-all-debug.js" charset="utf-8"></script>
	<script type="text/javascript" src="../../resources/js/dataStores.js" charset="utf-8"></script>
	<script type="text/javascript" src="../../resources/js/dataTables.js" charset="utf-8"></script>
				
	<script type="text/javascript"> var d_i=0; var c_i=0; var m_i=0; var y_i=0; var i=0; var targetYear=new Date(),compareYear="", tID = 0;</script>
	<script>
			
	
			Ext.application({
			name: 'AIOS',
			requires: [
			          	'Ext.data.Store',
			          	'Ext.dataview.List',
			      		'Ext.Toolbar',
			           	'Ext.chart.Chart', 
					   	'Ext.chart.interactions.PanZoom',
						'Ext.chart.series.*', 
						'Ext.chart.axis.*', 
						'Ext.chart.*',
						'Ext.TitleBar',
						'Ext.draw.Component',
						'Ext.chart.CartesianChart',
						'Ext.Viewport.*'
			           
			       ],
			launch: function() {
				
					Ext.create("Ext.tab.Panel", {
					fullscreen: true,
					activeItem: 4,
					tabBarPosition: 'bottom',

					items: [
					        
//************************************** Disabled **************************************************************************				        

							{
							    title: ' ',
							    styleHtmlContent: true,
							    scrollable: true,
							    
							    listeners: {
							    	activate: function() {
							    		this.setHidden(true);
									}
								},
							 }, 
					        
					        
					        
//************************************** Present View **************************************************************************				        
					    
				            {
				                title: '現在値',
				              	iconCls: 'now',
				                styleHtmlContent: true,
				                scrollable: true,
				                listeners: {
									activate: function() {
										document.location.href = "currentView.html"
										
									}
								},
					 	   },
				 		    		
//***************************************** Day View *********************************************************				                
				                
				            {
				                title: '日',
				                iconCls: 'cld',
				                styleHtmlContent: true,
								scrollable: true,
								
								listeners: {
									activate: function() {
										document.location.href = "dayView.html"
									}
								},
				                
				                items: [
				

					 	                
					 		    ]
				            },
				            
				  
				            
				            
				            
				            
				            
				            
// ******************************************** Month View *************************************************************				            
				            
				            {
				                title: '月',
				                iconCls: 'cld',
				                styleHtmlContent: true,
								scrollable: true,
				                listeners: {
									activate: function() {
										document.location.href = "monthView.html"
									}
								},

				            items: [
				                    
		
					 	      		 
				                ]},
				                			
				                
			
				                
				                
				                
				                
				                
// *************************************************** Year View *******************************************************			 	                

				           	{
				                title: '年',
				                pressed : true,
				                iconCls: 'cld',
				                styleHtmlContent: true,
								scrollable: true,
				                listeners: {
									activate: function() {
										
										Ext.getCmp('targetYearPicker').setValue(targetYear);
										Ext.getCmp('compareYearPicker').setValue(compareYear);
										
										/* Ext.data.JsonP.request({
											url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id=3&report_type=2&date_start='+targetYear.getFullYear()+'-1-1&date_end='+targetYear.getFullYear()+'-12-28',
											type: 'GET',
											crossDomain: true,
											dataType: "json",
											callbackkey: 'callback',
											scope: this,      /// fix handler scope
	
											callback: function (response, value, request) {
												storeTargetMonthsData(value);
										    },
										    

											failure: function (response, request) {
												Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
											}
										});  */
										
										Ext.data.JsonP.request({
											url: 'http://153.121.40.23:8080/aios-api/aios/api/GetTapGroup.php',
											method: 'POST',
											callbackkey: 'callback',
											params: {
												tap_id: 1
											},
											scope: this,      /// fix handler scope

											callback: function (response, value, request) {
												StoreTapList(value);
												
											},

											failure: function (response, request) {
												Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
											}
										});
										
									}
								},

				            items: [
				                    
					///////////////////// Header ////////////////////
				                    
				                    {
				 		       			xtype : 'titlebar',
				 		       			docked : 'top',
				 		       			title : '年',
				 		       			items : [
				 		       			{
				 		       				xtype : 'button',
				 		       				align : 'right',
				 		       				ui : 'round',
				 		       				iconCls: 'home',
				 		       				text : 'ホーム',
				 		       				 handler: function(){
				 		       			            document.location.href = "../../index.html";         
				 		       			        }
				 		       				
				 		       			},   
				 		       			{
				 		       				xtype: 'selectfield',
				 		       				id : 'tapGroup',
				 		       				name: 'options',
				 		       				store : storeTap,
				 		       				displayField: 'tapGroupName',
				 		       		 		valueField: 'tapGroupID',
					 		       		 	listeners: {
						 	 	       		 	change: function (select, newValue, oldValue) {
						 		       		 				tID = Ext.getCmp('tapGroup').getValue();
						 		       		 				
						 		       		 			Ext.data.JsonP.request({
					 		    	        				url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id='+tID+'&report_type=2&date_start='+targetYear.getFullYear()+'-1-1&date_end='+targetYear.getFullYear()+'-12-28',
															type: 'GET',
															crossDomain: true,
															dataType: "json",
															callbackkey: 'callback',
															scope: this,      /// fix handler scope
					
															callback: function (response, value, request) {
																storeTargetMonthsData(value);
														    },
														    

															failure: function (response, request) {
																Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
															}
														});  
						 		       		 			
						 		       		 			if(Ext.getCmp('compareYearPicker').getValue() != null){
							 		       		 			Ext.data.JsonP.request({
					 		    	                    		url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id='+tID+'&report_type=2&date_start='+compareYear.getFullYear()+'-1-1&date_end='+compareYear.getFullYear()+'-12-28',
																	type: 'GET',
																	crossDomain: true,
																	dataType: "json",
																	callbackkey: 'callback',
																	scope: this,      /// fix handler scope
							
																	callback: function (response, value, request) {
																		storeCompareMonthsData(value);
																    },
																    
																	failure: function (response, request) {
																		Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
																	}
																});
						 		       		 			}
						 		       		 				
									 		       		} 
					 		       				}
				 		       			}
				 		       			]
				 		            },
				 		            
				 		    		
				 		    		
	 		   		////////////////// Target and Compare date selector////////////////		 		    		
				 		    		
				 	                {
				 		    			
				 		    			xtype: 'fieldset',
				 		    			bodyStyle: "background-color: #C0C0C0;",
				 		    		 	layout: {
				 		    	            type: 'hbox',
				 		    	            pack: 'start', 
				 		    	            align: 'left'
				 		    	        },
				 		    	        
				 		    			items: [
				 		    			        {
													xtype: 'fieldset',
													bodyStyle: "background-color: #C0C0C0;",
												 	layout: {
											        type: 'vbox',
											        pack: 'start', 
											        align: 'left'
										     },
										     
												items: [
								 		    			{
								 		    	               xtype: 'datepickerfield',
								 		    	               id: 'targetYearPicker',
								 		    	               destroyPickerOnHide: true,
								 		    	                label: '対象年',
								 		    	                name: 'targetDate',
								 		    	                dateFormat :"Y",
								 		    	                value: new Date(),
								 		    	              	picker: {
								 		    	              		yearFrom : new Date().getFullYear()-2,
								 		    	              		slotOrder:["year"],
								 		    	              		
								 		    	              		 listeners: {
								 		    	                       show: function(component, eOpts) {
								 		    	                           var date = this.getValue();
								 		    	                           if (!date || isDateInPast(date)) {
								 		    	                               this.setValue(new Date());
								 		    	                           }
								 		    	                       },
								 		    	                       
								 		    	                      change: function(picker, value) {
								 		    	                    	 targetYear = value;
								 		    	                    	  
										 	 /////////////json data for Month target ///////////
										 	 
										 		    	        			Ext.data.JsonP.request({
										 		    	        				url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id='+tID+'&report_type=2&date_start='+targetYear.getFullYear()+'-1-1&date_end='+targetYear.getFullYear()+'-12-28',
																				type: 'GET',
																				crossDomain: true,
																				dataType: "json",
																				callbackkey: 'callback',
																				scope: this,
																				/* params: {
																					tap_id: 1
																				}, */
																				scope: this,      /// fix handler scope
										
																				callback: function (response, value, request) {
																					storeTargetMonthsData(value);
																			    },
																			    

																				failure: function (response, request) {
																					Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
																				}
																			}); 
										 		    	                 } 
								 		    	                       
								 		    	                   }, 
								 		    	              	}
								 		    			},
								 		    			        
								 		    			{
								 		    				xtype: 'fieldset',
								 		    				bodyStyle: "background-color: #C0C0C0;",
								 		    			 	layout: {
								 		    	                type: 'vbox',
								 		    	                pack: 'start', 
								 		    	               align: 'middle'
								 		                },
								 		    			items: [
								 		    			{
								 		    					xtype: 'textfield',
								 		    					id: 'yearTargetTotal',
								 		    					label: '累積電力量',
								 		    					readOnly: true,
								 		    					value: '3124'
								 		    				}, {
								 		    					xtype: 'textfield',
								 		    					id: 'yearTargetMax',
								 		    					label: '最大電力',
								 		    					readOnly: true,
								 		    					value: '192'
								 		    			}]
								 		    			
								 		    		}]}, {
								 						
								 						xtype : 'spacer'
								 					},
				 		    		
				 		    		{
				 		    			

										xtype: 'fieldset',
										bodyStyle: "background-color: #C0C0C0;",
									 	layout: {
								        type: 'vbox',
								        pack: 'start', 
								        align: 'left'
							     },
							     
									items: [
					 		    			{
					 		    					xtype: 'datepickerfield',
					 		    					id: 'compareYearPicker',
					 		    	            	destroyPickerOnHide: true,
					 		    	                label: '比較年',
					 		    	                name: 'targetDate',
					 		    	                dateFormat :"Y",
					 		    	              //  id: 'yearComapreDate',
					 		    	                //value: new Date(),
					 		    	              	picker: {
					 		    	              		
					 		    	              		yearFrom : new Date().getFullYear()-2,
					 		    	              		slotOrder:["year"],
					 		    	              		
					 		    	              		 listeners: {
					 		    	                       show: function(component, eOpts) {
					 		    	                           var date = this.getValue();
					 		    	                           if (!date || isDateInPast(date)) {
					 		    	                               this.setValue(new Date());
					 		    	                           }
					 		    	                       },
					 		    	                     
					 		    	                      change: function(picker, value) {
					 		    	                    	  compareYear=value;
					 		    	                    	  
					 	 /////////////json data for Month Compare ///////////      	  
					 		    	                    	 Ext.data.JsonP.request({
					 		    	                    		url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id='+tID+'&report_type=2&date_start='+compareYear.getFullYear()+'-1-1&date_end='+compareYear.getFullYear()+'-12-28',
																	type: 'GET',
																	crossDomain: true,
																	dataType: "json",
																	callbackkey: 'callback',
																	scope: this,
																	/* params: {
																		tap_id: 1
																	}, */
																	scope: this,      /// fix handler scope
							
																	callback: function (response, value, request) {
																		storeCompareMonthsData(value);
																    },
																    
																	failure: function (response, request) {
																		Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
																	}
																});  
							 		    	                 } 
					 		    	                       
					 		    	                   }, 
					 		    	              	}
					 		    		},
					 		    			        
						 		    	{
						 		    				xtype: 'fieldset',
						 		    				bodyStyle: "background-color: #C0C0C0;",
						 		    			 	layout: {
						 		    	                type: 'vbox',
						 		    	                pack: 'start', 
						 		    	               align: 'middle'
						 		                },
						 		    			items: [
						 		    			{
						 		    					xtype: 'textfield',
						 		    					id: 'yearCompareTotal',
						 		    					label: '累積電力量',
						 		    					readOnly: true,
						 		    					value: ''
						 		    				}, {
						 		    					xtype: 'textfield',
						 		    					id: 'yearCompareMax',
						 		    					label: '最大電力',
						 		    					readOnly: true,
						 		    					value: ''
						 		    			}]
						 		    			
						 		    		}]
				 		    			
				 		    			}
				 		    		
				 		    		]
									},	
				 		    		
				 		    		
				 		    		
									////////// graph/////////	
									
					 	               {
					 	                   xtype: 'carousel',
					 	                   height: 430,
						 	         		width: '100%',
	
					 	                   defaults: {
					 	           				styleHtmlContent: true	
					 	           			},

							 	           items: [
													{
														   xtype: 'container',
														   layout: 'fit',
														   items: [
												 	                  {
																			
																			xtype: 'chart',
																			background: 'white',
																			width: '100%',
																			height: 400,
																											
																            animate: true,
																            store: storeMonths,
																            legend: {
																            	position : 'top'
																            },
																            axes: [{
																	                type: 'numeric',
																	                position: 'left',
																	                fields: ['data1','data2'],
																	                title: {
																	                    text: '電力量(kWh)',
																	                    fontSize: 15,
																	                },
																	                
																	                grid: {
																	                    odd: {
																	                        opacity: 0.25,
																	                        fill: '#ddd',
																	                        stroke: '#bbb',
																	                        'stroke-width': 0.5
																	                    }
																	                },
																	                minimum: 0
																		       		 }, 
					
																		       			 {
																		                type: 'category',
																		                position: 'bottom',
																		                fields: ['name'],
																		                title: {
																		                    text: '月',
																		                    fontSize: 15
																		                }
																		         }
																		         
																		       		 
																		       		 
																		       		 ],
																		            
																		    series: [{
																		                type: 'bar',
																		                highlight: {
																		                    size: 7,
																		                    radius: 7
																		                },
																		                style: {
																		                     fillStyle: '#F0A50A'
																		                },
																						fill: true,
																		                xField: 'name',
																		                yField: 'data1',
																		                title : ['対象年'],
																		               
																		            }, {
																		                type: 'line',
																		                highlight: {
																		                    size: 7,
																		                    radius: 7
																		                },
																		                style: {
																		                    stroke: '#C20024'
																		                },
																						markerConfig: {
																		                    type: 'circle',
																							size: 1,
																							radius: 1,
																							stroke: '#C20024',
																							'stroke-width': 1
																		                },
																						fill: false,
																						smooth: true,
																		                xField: 'name',
																		                yField: 'data2',
																		                title : '比較年',
																		               
																		            }]
																		},
																]
						 	                			},
													   {

														xtype: 'fieldset',
														id : 'monthTableView',
														items: [
														        {
														        	xtype: 'panel',
																	width: '100%',
																	height : '100%',
																	styleHtmlContent: true,
																	html: [generateHtmlMonthsTable(storeMonths)],
														        }
														       
															]
								 		    			
								 	                }, 
					 	     				]
					 	      		 },
				 		    		
				 		    		
				                ]},
				                
				                
				                
			
				                
				                
				                
				                
				                
//************************************** Statistic View *********************************************************************************************

				            {
				                title: '統計',
				              	iconCls: 'chart',
				              	styleHtmlContent: true,
								scrollable: true,
				                listeners: {
									activate: function() {
										document.location.href = "statisticView.html"

									}
								},
							},
					]
				});
			}
		});
	</script>
 </head>
 <body>
 </body>
</html>
				